﻿@using PagedList.Mvc;
@model PagedList.IPagedList<OT.Areas.Admin.Models.Tests>
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Student/Views/Shared/_Layout.cshtml";
}
<div class="form-group">
    <div class="col-lg-3">
        <input id="TXTSearchString" type="text" placeholder="Search Box" class="form-control">
    </div>
    <a id="btnSearch" class="btn btn-sm btn-default">Search</a>
</div>
<div class="widget">
    <div class="widget-head">
        <div class="pull-left">Available Tests</div>
        <div class="clearfix"></div>
    </div>
    <div class="widget-content">
        <div id="NoRecord"></div>
        <table class="table table-striped table-bordered table-hover" id="TableAvailableTest">
            <thead>
                <tr  data-bind="click: sortTable">
                    <th data-column="TestName" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'TestName'? iconType :'sorting' }">Test</th>
                    <th data-column="TestType1" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'TestType1'? iconType :'sorting' }">Type</th>
                    <th data-column="Description" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'Description'? iconType :'sorting' }">Description</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: pageData()">
                <tr>
                    <td data-bind="text: TestName"></td>
                    <td data-bind="text: TestType1"></td>
                    <td data-bind="text: Description"></td>
                    <td><a data-bind="attr: { href: '/Student/Available/ContinueTest?TestID=' + TestID() }"><span>Coutinue</span></a></td>
                </tr>
            </tbody>
        </table>
        <div class="widget-foot" id="paging">
           <ul class="pagination pagination-sm pull-right">
                 <li><a id="FirstPageButton" href="javascript:void(0)">First</a></li>
                 <li><a id="prevPageButton" href="javascript:void(0)">Prev</a></li>
                <li data-bind="foreach: ko.utils.range(1, pager())"><a data-bind="attr: {text :  $data }, text : $data" href="javascript:void(0)"  class="pageNumber"></a></li>
                <li><a  id="nextPageButton"  href="javascript:void(0)">Next</a></li>
                 <li><a id="LastPageButton" href="javascript:void(0)">Last</a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            HideTable();
            $('#h2Title').html("<i class='fa fa-plus-circle'></i> Available Tests");
            $('#aTitle').html("Available Tests");
            $('#liAvailable').addClass("open");
        });
        function HideTable() {
            $("#TableAvailableTest").hide();
            $('#paging').hide();
            $('#NoRecord').html('<img src="../img/Fillingbrokenring.gif"> loading...');
            var table = document.getElementById("TableAvailableTest");
            var rowCount = table.rows.length;
            if (rowCount < 2) {
                $('#NoRecord').show();
                showMsg('NoRecord', 'No Record available', 'info');
            }
        }
        function ShowTable() {
            var table = document.getElementById("TableAvailableTest");
            var rowCount = table.rows.length;
            $('#NoRecord').hide();
            $("#TableAvailableTest").show();
            $('#paging').show();
        }
        var loadPage = function (pageNumber, pageSize, searchString) {
            $.ajax({
                url: "/Student/Available?pageNumber=" + pageNumber + "&pageSize=" + pageSize + "&searchString=" + searchString + "&pgindex=10&columnFilter=" + '',
                type: "POST",
                success: function (data) {
                    if (vm == null) {
                        vm = new viewModel(data);
                        ko.applyBindings(vm);
                        if (data.Data.length == 0) {
                            HideTable();
                        }
                        else {
                            ShowTable();
                        }
                        return data.Data.length;
                    }
                    else {
                        vm.pageData(ko.observableArray());
                        vm.pageData(ko.mapping.fromJS(data.Data));
                        vm.maxPageIndex(Math.ceil((data.RecordCount) / 10));
                        if ((vm.maxPageIndex() + 1) <= 10) {
                           // $("#prevPageButton").css({ "display": "intial" });
                          //  $("#nextPageButton").css({ "display": "none" });
                        }
                        else if ((vm.maxPageIndex() + 1) >= 5 && !vm.isLastPage()) {
                           // $("#nextPageButton").css({ "display": "intial" });
                        }
                        else if ((vm.maxPageIndex() + 1) >= 5 && !vm.isFirstPage()) {
                           // $("#prevPageButton").css({ "display": "intial" });
                        }
                        if (data.Data.length == 0) {
                            HideTable();
                        }
                        else {
                            ShowTable();
                        }
                        return data.Data.length;
                    }
                }
            });
        }
    </script>
}
@Scripts.Render("~/bundles/pagedlist")